<template>
	<div class="all">

		<!-- <div style="display: flex; justify-content: space-between;">
			<div style="color: #5A5A5A; font-weight: bold; font-size: 0.3rem; padding: 0.3rem 0.3rem;">选择要升级的卡</div>
			<div style="color: #5A5A5A; font-weight: bold; font-size: 0.3rem; padding: 0.3rem 0.3rem;">账户余额：<span style="color:#FF3640;">{{person.money}}</span>元</div>
		</div> -->
		
		<!-- <div style="padding: 0.3rem;">
			
			<van-checkbox-group v-model="list"  @change="quxiao">
			  <van-cell-group>
				<div v-for="(item, index) in kalist" clickable :key="index" style="margin-bottom: 0.3rem;">
					<div style="background: #FFFFFF; border-radius: 0.1rem;">
						<div style="display: flex; margin-bottom: 0.3rem; padding: 0.3rem;">
							<div style="margin-right: 0.2rem; height: 0.4rem;">
								<template>
								  <van-checkbox :name="item.iccid" checked-color="#25C55A" />
								</template>
							</div>
							<div>
								<div style="display: flex; margin-bottom: 0.2rem;">
									<div style="color: #666666; font-size: 0.25rem; margin-right: 0.2rem; font-weight: bold;">卡{{index+1}}</div>
									<div style="color: #666666; font-size: 0.25rem;">当前套餐：</div>
									<div style="color: #666666; font-size: 0.25rem;">{{item.packageName}}</div>
								</div>
								<div style="color: #ACACAC;">ICCID：{{item.iccid}}</div>
							</div>
						</div>
					</div>
			      
			    </div>
			  </van-cell-group>
			</van-checkbox-group>
		
			<div style="color: #FF3640;">* 如取消勾选视为弃卡，原卡在月末会停机并注销</div>
		</div> -->
		<div style=" font-weight: bold; font-size: 0.25rem; padding: 0.3rem 0.3rem; color: #FF1464;">填写收货信息（务必认真填写，提交后不可更改!!!）</div>
		<div style="margin: 0.3rem;">
			<van-cell-group>
			  <van-field v-model="name" label="姓名" placeholder="请输入姓名" />
			</van-cell-group>
			<van-cell-group>
			  <van-field v-model="mobile" label="联系电话" placeholder="请输入联系电话" />
			</van-cell-group>
			<van-cell-group>
				<div @click="show = true" style="line-height: 24px; padding: 10px 16px; background: #FFFFFF; display: flex;">
					<div style="width: 90px;">收货省市区</div>
					<div >{{address2}}</div>
				</div>
			</van-cell-group>
			<van-cell-group>
			  <van-field v-model="address" label="收货地址" placeholder="请输入收货地址" />
			</van-cell-group>
			<div style="padding: 10px 16px; color: #999999;"><span style="color: #FF3640; font-weight: bold;">该卡在：新疆、西藏、广西、福建、云南、吉林、广东清远地区不可用!</span></div>
			<div style="color: #FF3640; margin: 0.3rem 0;">提示：需支付物流费3.9元</div>
		</div>
		
		
		
		<div @click="huanka" style="background:#FF4141; color: #FFFFFF; text-align: center; margin: 0.3rem; padding: 0.2rem; cursor: pointer; border-radius: 0.1rem;">提交支付</div>
		<van-popup v-model="show" position="bottom" >
			<van-area title="省市区" :area-list="areaList" @confirm="onAddressConfirm" @cancel="show=false" />
		</van-popup>

	</div>
</template>

<script>
	import axios from 'axios'
	import bus from '@/assets/bus.js'
	export default {
		name: 'genghuan',
		data() {
			return {
				list:[],
				list2:[],
				kalist:[],
				name:"",
				mobile:"",
				address2:"请选择省市区",
				address:"",
				yue:"",
				areaList:"",
				show:false,
				person:""
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			axios.get("https://cdn.91haoka.cn/jsonwulianwangka3.json")
			  .then((response)=> {
				  this.areaList = response.data;
			  })
			this.huoquka()
			this.getyonghu()
			// this.getbalance()
			

		},
		methods: {
			quxiao:function(e){
				if(e.length < this.list2.length){
					this.$dialog.confirm({
					  title: '放弃换卡确认',
					  message: '您仅有一次换卡机会，取消勾选表示您放弃该卡更换！',
					  overlay:true,
					  confirmButtonText:'确认放弃',
					  confirmButtonColor:'#f00',
					  cancelButtonText:'取消',
					  cancelButtonColor:'#4fc08d'
					})
					.then(() => {
						this.list2 = e
					})
					.catch(() => {
						this.list = this.list2
					});
				}else{
					this.list2 = e
				}
				
			},
			onAddressConfirm:function(values){
				console.log(values)
				this.address2 = values[0].name + values[1].name + values[2].name
				this.show = false
			},
			huanka:function(){
				if(!(/^1[3456789]\d{9}$/.test(this.mobile))){
					 vant.Toast('请填写正确的手机号！');
					 return false
				 }
				if(this.name =='' || this.mobile =='' || this.address =='' || this.address2 =='请选择省市区'){
					vant.Toast('填写收货信息！');
					return false
				}
				var that = this
				axios.post(this.url+`/mobile/api/reciveUserAddr?name=${this.name}&mobile=${this.mobile}&address=${this.address2}${this.address}`)
				.then((response)=>{
				    if(response.data.code == 200){
				  
						WeixinJSBridge.invoke(
						 'getBrandWCPayRequest', {
						      "appId":response.data.result.appId,
						      'timeStamp': response.data.result.timeStamp,
						      'nonceStr': response.data.result.nonceStr,
						      'package': response.data.result.package,
						      'signType': response.data.result.signType,
						      'paySign': response.data.result.paySign,
						 },
						 function(res){
							 
						       if(res.err_msg == "get_brand_wcpay_request:ok" ){
								    that.huoquka()
								    that.getyonghu()
								    setTimeout(()=>{
								    	that.$router.push('/')
								    },1000)
							   } 
						 }); 
				    }else{
						this.$toast(response.data.msg.info);
					}
				})
			},
			
			
			huoquka:function(){
				this.axios.get(this.url+`/mobile/api/getBandCardList`)
					.then(response => {
						if(response.data.success == true){
							let list = response.data.result
							for(let i in list){
								if(list[i].status == 2 && list[i].isSubmit ==0 ){
									this.list.push(list[i].iccid)
									this.kalist.push(list[i])
								}
							}
							console.log(this.kalist)
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			getyonghu:function(){
				this.axios.get(this.url+`/mobile/api/getCountInfo`)
					.then(response => {
						if(response.data.success == true){
							this.person = response.data.result
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			getbalance:function(){
				axios.get('/api/account/balance').then((response)=>{
				    if(response.data.msg.code == 0){
				        this.yue = parseFloat(response.data.data.balance).toFixed(2)
				    }else{
						vant.Toast(response.data.msg.info);
					}
				})
			},
			//获取url的code用
			getUrlParam:function(name) {   
			    var query = window.location.search.substring(1);
			    var vars = query.split("&");
			    for (var i=0;i<vars.length;i++) {
			            var pair = vars[i].split("=");
			            if(pair[0] == name){return pair[1];}
			    }
			    return(false);
			},
			fukuan:function(){
			    var that = this
			    axios.post(that.links + '/recharge/hua-pay', {money:this.value})
			        .then(response => {
			            if(response.data.msg.code == 0){
			               WeixinJSBridge.invoke(
			                'getBrandWCPayRequest', {
			                     "appId":"wx2d18b51e3875af9a",    
			                     'timeStamp': response.data.data.payInfo.timeStamp,
			                     'nonceStr': response.data.data.payInfo.nonceStr,
			                     'package': response.data.data.payInfo.package,
			                     'signType': 'MD5',
			                     'paySign': response.data.data.payInfo.paySign,
			                },
			                function(res){
			                      if(res.err_msg == "get_brand_wcpay_request:ok" ){} 
			                }); 
			            }else{
			                that.$message.error(response.data.msg.info);
			            }
			        })
			},

		},

	}
</script>

<style scoped lang="less">
	.all {
		background: #FFFFFF;
		font-size: 0.28rem;
		min-height: 100vh;
		padding: 0rem;

		.jli {
			border-bottom: 1px #F1F3F5 solid;
			line-height: 0.5rem;
			padding-bottom: 0.1rem;
			margin-bottom: 0.2rem;
		}
	}
</style>
